﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoadTest.aspx.cs" Inherits="QuailDashboard.View.Web.LoadTestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
  <style>
  body
{
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}
</style>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.6.2");
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();

            <% WriteData(); %>

            var div = document.getElementById('chart_div');

            var chart = new google.visualization.LineChart(div);

            var h = div.offsetHeight;
            var w = div.offsetWidth;

            // alert( w + ', ' + h);
            
            chart.draw(data, { width: 1000, height: 500, title: 'Page Performance' });
        }
    </script>
    <title><%=PageTitle%></title>
  </head>
  <body>

    <div style="width:100%; height:100%" id="chart_div"></div>
    <hr />
    <form action="LoadTest.aspx" method="get">
    <h2>Graphing Options</h2>
        Data Group: <select name="group" id="group">
        <%=GetDataGroupOptions()%>
        </select><br />
        Environment: <select name="env" id="env">
        <%=GetEnvironmentSelectOptions()%>
        </select><br />
        Num Tests / Num Threads: <select name="testsandthreads" id="testsandthreads">
        <%=GetTestsAndThreadsOptions()%>
        </select><br />
        Graph Type: <select name="bytests" id="bytests">
        <option value="">Daily</option>
        <option value="1" <%=_format == DisplayFormat.TestByTest ? "selected" : string.Empty%>>Test-by-test</option>
        </select>
        <br />
        Date Range: <input type="text" value="<%=GetStartDate()%>" name="start" id="start"/> to <input type="text" value="<%=GetEndDate()%>" name="end" id="end"/><br />
        <input type="submit" value="Update Graph" />
    </form>

  </body>

  <script type="text/javascript">
      var testsAndThreadsPerGroup = <%=GetTestsAndThreadsPerGroup()%>;

      $('select#group').change(function () {
          $('select#testsandthreads option').hide();
          $('select#testsandthreads option[value=""]').show();
          $('select#testsandthreads').val('');
          for (var index in testsAndThreadsPerGroup[$('select#group').val()]) {
              var testsAndThreads = testsAndThreadsPerGroup[$('select#group').val()][index];
              $('select#testsandthreads option[value="' + testsAndThreads + '"]').show();
          }
      });
      $('select#group').change();
      $('select#testsandthreads').val('<%=GetTestAndThreadsValue() %>');
  </script>

</html>
